From f99fd41ee23d7669812ff1d88d23a9b7f22db901 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Tue, 24 Oct 2023 18:18:37 -0700
Subject: feat(user): prettier user route

---
 src/routes/user/[user]/+page.svelte | 44 ++++++++++++++++++++++++++++---------
 1 file changed, 34 insertions(+), 10 deletions(-)

(limited to 'src/routes/user/[user]')

diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index 227ba252..858e6aec 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -27,14 +27,38 @@
 {:else if userData === undefined}
 	Loading ...
 {:else}
-	<p>
-		<a href={`https://anilist.co/user/${userData.name}`} target="_blank" title={String(userData.id)}
-			>@{userData.name}</a
-		>
-		• <a href={`/user/${userData.name}/badges`}>Badge Wall</a>
-	</p>
-
-	This user has watched {(userData.statistics.anime.minutesWatched / 60 / 24).toFixed(1)} days of anime
-	and read
-	{((userData.statistics.manga.chaptersRead * 8.58) / 60 / 24).toFixed(1)} days of manga.
+	<div class="user-grid">
+		<p>
+			<a
+				href={`https://anilist.co/user/${userData.name}`}
+				target="_blank"
+				title={String(userData.id)}
+			>
+				<img src={userData.avatar.large} alt="" width="100vw" />
+			</a>
+		</p>
+
+		<div>
+			<p>
+				<a
+					href={`https://anilist.co/user/${userData.name}`}
+					target="_blank"
+					title={String(userData.id)}>@{userData.name}</a
+				>
+				• <a href={`/user/${userData.name}/badges`}>Badge Wall</a>
+			</p>
+
+			This user has watched {(userData.statistics.anime.minutesWatched / 60 / 24).toFixed(1)} days of
+			anime and read
+			{((userData.statistics.manga.chaptersRead * 8.58) / 60 / 24).toFixed(1)} days of manga.
+		</div>
+	</div>
 {/if}
+
+<style>
+	.user-grid {
+		display: flex;
+		flex-wrap: wrap;
+		column-gap: 1.5em;
+	}
+</style>
-- 
cgit v1.2.3